<!-- 列表加载组件 -->
<template>
	<view id="boxs" class="wi_100"><!-- scroll-with-animation -->
		<scroll-view scroll-y="true"  @scrolltolower="loadMore" class="wi_100 flex" :style="{height:`${heights}px`}" scroll-with-animation :scroll-top="scrolltop" >
		<!-- <scroll-view refresher-enabled @refresherrefresh="getMore"
enable-back-to-top refresher-default-style="black" refresher-background="#f7f7f8"  :refresher-triggered="istriggered" scroll-y="true"  @scrolltolower="loadMore" class="wi_100 flex" :style="{height:`${heights}px`}"> -->
			<!-- <view class="flex justify_center flex_column align_center" style="padding-top: 40%;" v-if="!istriggered&&props.nolistips&&(total===0||!lists.length)">
					<image :src="props.nolistimg"  mode="widthFix" class="nolistimg"/>
					<view class="te_center f_s32 te_black9">{{props.nolisttext}}</view>
			</view> -->
			<view class="flex justify_center flex_column align_center" style="padding-top: 25%;" v-if="props.nolistips&&total===0&&!lists.length">
					<image :src="props.nolistimg"  mode="widthFix" class="nolistimg"/>
					<view class="te_center f_s32 te_black9 ma_top40">{{props.nolisttext}}</view>
			</view>
			<slot name="listContent" :lists="lists" :total="total">
			</slot>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, getCurrentInstance, defineExpose,withDefaults,defineProps ,nextTick} from 'vue'
	const instance = getCurrentInstance(); // 获取组件实例
	
	defineExpose({
		init, //初始化
		getinfo//获取list值
	})
	const props =defineProps({
		instances: { 
			type: Object,
			default: {}
		},
		scrollintoviewvalue:{
			type: String,
			default: ''
		},
		nolistips: { // 没数据是否提示，默认true为提示
			type: Boolean,
			default: true
		},
		nolisttext: { // 没数据的内容提示，默认暂无内容
			type: String,
			default: '暂无内容'
		},
		nolistimg: { // 没数据的图片提示显示，默认是没有
			type: String,
			default: '../static/image/nolist1.png'
		},
		isauto: { // 是否自动加载
			type: Boolean,
			default: true
		},
		parameter: { //参数合集
			type: Object,
			default: {}
		},
		getList: { // 获取列表的接口烦
			type: Function,
			default: function (){}
		},
	})
	
	const scrolltop =ref<any>(false)
	
	// const props = withDefaults(
	// 	defineProps<{
	// 		isauto:true,
	// 		parameter ?: object,
	// 		getList : (data : any) => ({})
	// 	}>(),
	// 	{
	// 		/* title: '没有更多了',
	// 		ifNoneImg: true,
	// 		query: () => ({}) */
	// 	}
	// );
	
	
	// const props = withDefaults(
	// 	defineProps<{
	// 		isauto:true,
	// 		parameter ?: object,
	// 		getList : (data : any) => ({})
	// 	}>(),
	// 	{
	// 		/* title: '没有更多了',
	// 		ifNoneImg: true,
	// 		query: () => ({}) */
	// 	}
	// );
	// const istriggered = ref<boolean>(false)
	
	const heights = ref<number>(0)//列表实际高度
	const current = ref<number>(1)//页码
	const lists = ref<any>([])
	const control = ref<Boolean>(false)
	const total = ref<any>(null)
	onMounted(() => {
		getheight()
		if(props.isauto){
			getListfun()
		}
	})
	
	// const getMore = ()=>{
	// 	istriggered.value=true
	// 	init()
	// }
	
	const scrollid = ref<any>()
	
	const getheight = ()=>{
		
		uni.getSystemInfo({
			success(res) {
				setTimeout(()=>{
					let query = uni.createSelectorQuery().in(instance);
					query
						.select("#boxs")
						.boundingClientRect((data:any) => {
							boxtop.value = data.top
							heights.value = res.windowHeight - data.top
							
							// uni.getSystemInfo({
							// 	success(res) {
							// 		heights.value = res.windowHeight - data.top
							// 	},
							// });
						})
						.exec();
				},300)
			
			}
		});
	}
	
	const boxtop = ref<any>()
	const loadMore =()=>{
		if(lists.value.length>=total.value){
			return
		}
		if(control.value){
			return
		}
		control.value=true
		current.value++
		getListfun()
		
	}
	
	const getListfun = () => {
		if (!uni.getStorageSync('token')) {
			return
		}
		
		props.getList({
			size: 10,
			current: current.value,
			...props.parameter
		}).then((res : any) => {
			if (res.code == 200) {
				if(res.data.rows?.length>0){
					lists.value = [...lists.value, ...res.data.rows]
					control.value=false
				}else{
					control.value=true
				}
				total.value=Number(res.data.total)
				console.log(total.value,'total.valuetotal.valuetotal.valuetotal.value')
				if(props.scrollintoviewvalue&&current.value==1){
					setTimeout(()=>{
						nextTick(()=>{
							let query = uni.createSelectorQuery().in(props.instances);
							query
								.select("#"+props.scrollintoviewvalue)
								.boundingClientRect((data:any) => {
									console.log(boxtop.value)
										console.log(data)
									//scrolltop.value=boxtop.value +data.top
									scrolltop.value=data.top-boxtop.value-5
								})
								.exec();
						})
					},0)
				}
				
				
			}
			// setTimeout(()=>{
			// 	istriggered.value=false
			// },500)
		}).catch((err:any)=>{
			control.value=false
			// setTimeout(()=>{
			// 	istriggered.value=false
			// },500)
		})

		
		

	}
	
	
	function init(){
		control.value=false
		current.value = 1
		total.value=null
		lists.value=[]
		getListfun()
	}
	
	
	function getinfo(){
		return lists.value
	}
	
</script>
<style lang="scss" scoped>
	.nolistimg{
		width: 300upx;
		height: 320upx;
		// margin-top: 200upx;
	}
</style>